<template>
    <div>
        <el-table :data="tableData.ManageList" style="width: 100%" max-height="500">
            <el-table-column fixed prop="head" label="医生头像" width="150">
                <template #default="scope">
                    <img :src="scope.row.head" alt="" height="60" width="60">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="医生名称" width="120" />
            <el-table-column prop="department" label="医生所属科室" width="120" />
            <el-table-column prop="price" label="处方金额" width="120" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small">
                        <!-- 处方 点击位弹框-->
                        <el-icon @click="dialogFormVisible = true">
                            <Memo></Memo>
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:page-size=pageinfo.size v-model:current-page="pageinfo.page" layout="prev, pager, next"
            :total="1000" />
    </div>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="处方详情" style="width: 800px">
        <!-- 弹框表格 -->
        <el-table :data="tableData.ManageList" stripe style="width: 100%">
            <el-table-column prop="id" label="药品名称" width="100" />
            <el-table-column prop="department" label="商品名称" width="100" />
            <el-table-column prop="name" label="药品图片" width="100">
                <template #default="scope">
                    <img :src="scope.row.head" alt="" height="60" width="60">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="药品规格" width="100" />
            <el-table-column prop="price" label="药品单价" width="100" />
            <el-table-column prop="name" label="药品数量" width="100" />
            <el-table-column prop="name" label="有效期" width="100" />
            <el-table-column prop="name" label="用量备注" width="100" />
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, ref } from 'vue';
import { getprescription } from '@/API/western.api'
const tableData = reactive({
    // 总数
    total: 0,
    //  列表
    ManageList: [],
    // 列表弹框用的同一接口
})

// 发请求部分
const pageinfo = reactive({
    page: 1,
    size: 10
})
const getprescriptions = async () => {
    const res = await getprescription(pageinfo)
    console.log(res);
    tableData.total = res.data.total
    tableData.ManageList = res.data.data
}
watchEffect(getprescriptions)
// 弹框
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
</script>

<style scoped>

</style>